<template>


  <el-form-item label="品牌分区" prop="categoryAndBrand" :rules="{ required: true, message: '请选输入', trigger: 'change' }">
    <el-cascader
      placeholder="请选择分区和品牌"
      :props="props"
      v-model="spu.categoryAndBrand"
      @change="handleChange">
    </el-cascader>
  </el-form-item>
</template>

<script>
  import { getCategoryReq, getBrandById } from '@/api/product'

  export default {
    name: "categoryAndBrand",
    data() {
      return {
        categoryAndBrand:[{categoryId:'',categoryName:''}],
        props: {
          lazy: true,   //可以理解为开关，什么时候结束
          lazyLoad: this.getData
        },
      }
    },
    methods: {
      handleChange(value){
        console.log(value)
      },
      getData(node,resolve){
        const level = node.level
        const label = node.label
        const value = node.value

        console.log(level, label, value)
        console.log(node)
        let result;

        if (level === 0){
          getCategoryReq().then(response => {
            console.log(response)
            if (response.state === true) {
              result = response.data.category;
              result.forEach(item => {
                item.value = item.categoryId;
                item.label = item.categoryName
              })
              console.log("result =" + result)
              resolve(result)
              this.$notify.success({title: '成功',message: response.message, duration: 1500});
            } else {
              this.$notify.warning({ title: '失败', message: response.message, duration: 1500 });
            }
          })
        }else if (level === 1){
          getBrandById({categoryId: value}).then(response => {
            console.log(response)
            if (response.state === true) {
              result = response.data.brandList;
              result.forEach(item => {
                item.value = item.brandId;
                item.label = item.brandName
                item.leaf = level >= 1
              })
              console.log("result =" + result)
              resolve(result)
              this.$notify.success({title: '成功',message: response.message, duration: 1500});
            } else {
              this.$notify.warning({ title: '失败', message: response.message, duration: 1500 });
            }
          })
        }
      },
    },
    computed: {

      spu:{// 实时更新vuex中spu
        get(){
          return this.$store.getters.spu
        },
        set(value){
          console.log("set")
          this.$store.commit('product/SET_SPU',value)
        }
      },
    },
    beforeMount() {
    }
  };
</script>


<style scoped>

</style>
